<template>
    <div :class="{ 'theme-dark': windowStore.colorMode !== 'dark' }">
        <!-- 窗口控制按钮 -->
        <div class="control-buttons">
            <div class="window-title">
                <img src="/favicon.ico" alt="App Icon" class="app-icon" />
                <span>{{ windowTitle }}</span>
            </div>
            <div>
                <el-button link @click="minimizeWindow">
                    <el-icon>
                        <Minus />
                    </el-icon>
                </el-button>
                <el-button link @click="toggleMaximize">
                    <el-icon>
                        <CopyDocument v-if="windowStore.isMaximized" />
                        <FullScreen v-else />
                    </el-icon>
                </el-button>
                <el-button link @click="closeWindow">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button>
            </div>
        </div>
        <div class="common-layout"
            :style="{ width: windowStore.winWidth - (windowStore.isMaximized ? 30 : 10) +'px', height: windowStore.winHeight - (windowStore.isMaximized ? 70 : 50) +'px'}">
            <el-container>
                <el-header>
                    <!-- 菜单导航 -->
                    <el-menu :default-active="$route.path" mode="horizontal" router>
                        <el-menu-item index="/info/home">首页</el-menu-item>
                        <el-menu-item index="/info/software">软件商城</el-menu-item>
                        <el-menu-item index="/info/installed">安装的应用</el-menu-item>
                        <el-menu-item index="/info/system">系统信息</el-menu-item>
                        <el-menu-item index="/info/settings">设置</el-menu-item>
                        <el-menu-item index="/info/about">关于</el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <!-- 页面内容区域自动填充并支持滚动 -->
                    <div class="page-content"
                        :style="{ width: windowStore.winWidth - 21 - (windowStore.isMaximized ? 15 : 0) +'px', height: windowStore.winHeight - 90 - (windowStore.isMaximized ? 20 : 0) +'px'}">
                        <router-view />
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
    import { Minus, CopyDocument, FullScreen, Close } from '@element-plus/icons-vue';
    import { useWindowStore } from '/src/stores/windowStore';
    import { ipcRenderer } from 'electron';

    export default {
        name: 'App',
        components: {
            Minus,
            CopyDocument,
            FullScreen,
            Close
        },
        data() {
            return {
                windowTitle: 'Client App'
                // winWidth: 800,
                // winHeight: 600,
                // isMaximized: false
            };
        },
        setup() {
            const windowStore = useWindowStore();
            return { windowStore };
        },
        mounted() {
            // 获取初始化值
            (async () => {
                const result = await ipcRenderer.invoke('win-load');
                if (result.code === 200) {
                    this.windowStore.updateLocale(result.data);
                }
            })();

            // 全局监听窗口尺寸变化
            this._resizeListener = (event, data) => {
                this.windowStore.updateSize(data.width, data.height);
            };
            ipcRenderer.on('window-resized', this._resizeListener);

            // 监听最大化状态
            this._maximizeListener = (event, isMaximized) => {
                this.windowStore.updateMaximize(isMaximized);
            };
            ipcRenderer.on('update-maximize-status', this._maximizeListener);
            //this.$router.push('/home');
        },
        methods: {
            minimizeWindow() {
                ipcRenderer.send('minimize-window');
            },
            toggleMaximize() {
                ipcRenderer.send('toggle-maximize');
            },
            closeWindow() {
                ipcRenderer.send('close-window');
            }
        },
        beforeUnmount() {
            ipcRenderer.removeListener('window-resized', this._resizeListener);
            ipcRenderer.removeListener('update-maximize-status', this._maximizeListener);
        }
    };
</script>
<style scoped>
    .common-layout {
        overflow: hidden
    }

    .el-header {
        height: 37px;
        padding: 1px;
        /* border: 1px solid var(--el-menu-border-color); */
    }

    .el-main {
        padding: 2px 2px 0 2px;
        /* border: 1px solid var(--el-menu-border-color); */
        border-top: unset;
    }

    .page-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* 可选：给所有页面添加统一滚动条样式 */
    .page-content::-webkit-scrollbar {
        width: 6px;
    }

    .page-content::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 3px;
    }

    .control-buttons {
        display: flex;
        justify-content: space-between;
        padding: 0 10px 10px 0;
        -webkit-app-region: drag;
        cursor: move;
    }

    .window-title {
        font-size: 16px;
        font-weight: bold;
        user-select: none;
        -webkit-user-select: none;
        -webkit-app-region: drag;
        color: var(--el-text-color-primary);
        /* 允许点击标题拖动窗口 */
    }

    .app-icon {
        width: 24px;
        height: 24px;
        position: absolute;
    }

    .window-title span {
        padding-left: 32px;
    }

    .control-buttons button {
        -webkit-app-region: no-drag;
        margin-left: 10px;
        background-color: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }
</style>
<style scoped>
    .el-menu--horizontal {
        height: 37px
    }

    .el-menu--horizontal.el-menu {
        background-color: unset;
        border: unset;
    }

    .el-menu--horizontal>.el-menu-item {
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        padding: 0 20px;
        border-radius: 3px;
        margin: 4px 8px 4px 1px;
        transition: all 0.3s ease;
        color: var(--el-text-color-primary);
        background-color: transparent;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .el-menu--horizontal>.el-menu-item:hover,
    .el-menu--horizontal>.el-menu-item:focus {
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
</style>